<template>
  <div class="common-layout">
  <el-container class="container">
  <el-aside width="20%">
  <div>
  <img src="/logo.png" >
  </div>
  <el-menu :unique-opened="true" :router="true">
  <el-menu-item index="Ybp">
  <template #title>
  <el-icon><odometer /></el-icon>
  <span>仪表盘</span>
  </template>
  </el-menu-item>

  <el-sub-menu index="2">
  <template #title>
  <el-icon><icon-menu /></el-icon>
  <span>常用设置</span>
  </template>
  <el-menu-item index="Jsgl">教师管理</el-menu-item>
  <el-menu-item index="Xsgl">学生管理</el-menu-item>
  <el-menu-item index="Gggl">公告管理</el-menu-item>
  <el-menu-item index="Xtpz">系统配置</el-menu-item>
  <el-menu-item index="Ptfwq">判题服务器</el-menu-item>
  </el-sub-menu>

  <el-sub-menu index="3">
  <template #title>
  <el-icon><Aim /></el-icon>
  <span>问题</span>
  </template>
  <el-menu-item index="Wtlb">问题列表</el-menu-item>
  <el-menu-item index="Zjtm">增加题目</el-menu-item>
  <el-menu-item index="Drdctm">导入导出题目</el-menu-item>
  </el-sub-menu>

  <el-sub-menu index="4">
  <template #title>
  <el-icon><trophy /></el-icon>
  <span>比赛&练习</span>
  </template>
  <el-menu-item index="Bslb">比赛列表</el-menu-item>
  <el-menu-item index="Cjbs">创建比赛</el-menu-item>
  </el-sub-menu>

  <el-sub-menu index="5">
  <template #title>
  <el-icon><collection /></el-icon>
  <span>课程</span>
  </template>
  <el-menu-item index="Kclb">课程列表</el-menu-item>
  <el-menu-item index="Cjkc">创建课程</el-menu-item>
  </el-sub-menu>
  
  </el-menu>
  </el-aside>
  <el-container>
  <el-header>
  <el-dropdown size="large">
  <span class="el-dropdown-link">
  unername
  <el-icon class="el-icon--right">
  <arrow-down />
  </el-icon>
  </span>
  <template #dropdown>
  <el-dropdown-menu>
  <el-dropdown-item>logout</el-dropdown-item>
  </el-dropdown-menu>
  </template>
  </el-dropdown>
  <el-icon><share /></el-icon>
  <el-icon><search /></el-icon>
  </el-header>
  <el-main>
  <router-view/>
  </el-main>
  <el-footer>Build Version:20210929bd</el-footer>
  </el-container>
  </el-container>
  </div>
</template>

<script>
import {Odometer, Menu as IconMenu, Aim, Trophy,Collection,Search,Share,ArrowDown} from '@element-plus/icons-vue';

export default{
  name:'ZhuYe',
  components: {
    Odometer, IconMenu, Aim, Trophy, Collection, Search, Share, ArrowDown
  },
  methods:{

  }
}
</script>

<style>
.common-layout,.container{
  position:absolute;
  width:100%;
  height:100%;
}
.el-aside > div {
  width:100%;
  height:20%;
  vertical-align:middle;
  text-align:center;
}
.el-aside > div > img {
  width:50%;
  height:80%;
}
.el-header {
  background-color:#F9FAFC;
}
.el-header > i {
  margin-top: 15px;
  margin-right:15px;
}
.el-header > .el-dropdown {
  margin-top:15px;
}
.el-header >.el-dropdown, .el-header > i {
  float: right;
}
.el-dropdown-link {
  font-size:23px;
  font-weight:bolder;
  cursor:pointer;
  display:flex;
  align-items:center;
}
.el-main, .el-footer {
  background-color:#EDECEC;
}
</style>
